<template>
  <div class="tab-bar" ref="tabBar" :class="{stickTop:isStickTop,loginAndRegister:$route.path == '/login' || $route.path == '/register'}">
      <div class="logo">
          <a href="/">小析のBlog</a>
      </div>
      <div class="menuBtn" v-if="getWindow <= 768" @click="showMiniMenu" >三</div>
      <div class="menus" :class="{miniMenuShow:isShowMiniMenu}">
          <div class="closed" v-if="getWindow <= 768" @click="closeMiniMenu">X</div>
          <slot></slot>
      </div>
      <div class="other">
          <div class="search" @click="toggleSearch">
              <span class="iconfont" title="搜索一下吧~">&#xe67d;</span>
          </div>
          <div class="user">
              <router-link to="/login" v-if="!this.isLogin">
                <el-tooltip content="您还未登录，点击登录" placement="bottom" effect="light">
                    <span class="iconfont">&#xe640;</span>
                </el-tooltip>
              </router-link>
              <router-link to="/account" v-else>
                  <el-tooltip content="点击进入用户管理页面" placement="bottom" effect="light">
                    <img :src="this.isLogin?.hdportrait" alt="">
                  </el-tooltip>
              </router-link>
          </div>
      </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
    data() {
        return {
            currentIndex: 0,
            isStickTop: false,
            isSearchShow:false,
            isShowMiniMenu:false
        }
    },
    components: {
        
    },
    props: {
        menus: {
            type: Array,
            default() {
                return []
            }
        }
    },
    methods: {
        activeClick(index) {
            this.currentIndex = index
        },
        toggleSearch() {
            this.isSearchShow = true
            this.$emit('toggleSearch',this.isSearchShow)
        },
        //移动端显示菜单
        showMiniMenu() {
            this.isShowMiniMenu = true;
        },
        closeMiniMenu() {
            this.isShowMiniMenu = false;
        }
    },
    mounted() {
       
    },
    created() {
        //监听滚动事件
        window.addEventListener('scroll', e=>{
            //滚动条高度大于10的时候导航栏固定
            this.$store.commit('setScrollTop',{
                value: e.target.documentElement.scrollTop
            })
            let scroll = this.$store.getters.getScrollTop.value
            scroll > 10 ? this.isStickTop = true : this.isStickTop = false
        })
    },
    computed: {
        ...mapState(['isLogin']),
        getWindow() {
            return this.$store.getters.getWindowWidth.value
        }
    }
}
</script>

<style>
    .router-link-active {
        color: pink;
    }
    .loginAndRegister {
        background-color: #fff !important;
        box-shadow: none;
        color: #000 !important;
    }
    .stickTop {
        background-color: #fff !important;
        box-shadow: 0 -5px 25px #ccc;
        color: #000 !important;
    }
    @media screen and (max-width:1200px) {
        .tab-bar .menus a {
            font-size: 14px;
            transition: all .5s;
        }
    }
    .tab-bar img {
        width: 100%;
        border-radius: 50%;
    }
    .tab-bar {
        width: 100vw;
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        justify-content: space-between;
        padding: 0 var(--mtop);
        background-color: rgba(255,255,255,0);
        transition: all .2s linear;
        color: var(--defaultColor);
        z-index: 10;
    }
    .tab-bar:hover {
        background-color: var(--defaultColor);
        box-shadow: 0 -5px 25px #ccc;
        color: #000;
    }
    .tab-bar:hover .logo a {
        background-color: rgba(255,255,255);
    }
    .tab-bar .logo {
        display: inline-block;
        text-align: center;
        /* width: 7.5rem; */
    }
    .tab-bar .logo a {
        line-height: 4.5rem;
        font-size: 1.875rem;
        background-color: rgba(255,244,244,.5);
        border-radius: 15px;
        padding: 0;
    }
    .tab-bar .menus {
        display: flex;
        justify-content: space-around;
    }
    @media screen and (max-width:768px) {
        .closed {
            position: absolute;
            right: 0;
            font-size: 25px;
            width: 50px;
        }
        .miniMenuShow {
            left: 0 !important;
        }
        .tab-bar {
            justify-content: space-between;
            padding: 0;
        }
        .tab-bar .logo {
            display: none;
        }
        .menus .menu::after {
            display: none;
        }
        .tab-bar .menus{
            /* display: none; */
            position: fixed;
            left: -80vw;
            top: 0;
            flex-direction: column;
            justify-content: start;
            height: 100vh;
            width: 200px;
            background-color: #fff;
            box-shadow: 0 0 10px var(--shadow);
            text-align: center;
            color: #000;
            transition: all .5s;
        }
        .tab-bar .menus a {
            width: 11rem;
            line-height: 50px;
        }
        .other {
            margin-right: 15px;
        }
        .tab-bar .other .search,
        .tab-bar .other .user {
            width: 5rem;
        }
    }
    .menus a {
        display: inline-block;
        letter-spacing: 2px;
        text-align: center;
        line-height: 4.375rem;
        width: 5rem;
    }
    .tab-bar .other { 
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .search,
    .user {
        width: 3rem;
        text-align: center;
        cursor: pointer;
    }
    .tab-bar .other .search:hover,
    .tab-bar .other .user:hover {
        color: aqua;
        transition: all .5s;
    }
    .tab-bar .other .search span,
    .tab-bar .other .user span {
        font-size: 25px;
    }
    .menuBtn {
        line-height: 55px;
        font-size: 25px;
        margin-left: 15px;
    }
</style>